<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>invite</title>
    <link rel="stylesheet" href="static/invite.css" />
  </head>
  <body>
    <header>
      <h1>Earn Rewards by Inviting Friends</h1>
      <div class="list">
        <ul>
          <li class="active">
            <span><em>150</em> &nbsp;points earned for an invitation by</span><span>T***m</span>
          </li>
          <li class="active">
            <span><em>300</em> &nbsp;points earned for an invitation by</span><span>L***m</span>
          </li>
          <li class="active">
            <span><em>400</em> &nbsp;points earned for an invitation by</span><span>A***m</span>
          </li>
          <li class="active">
            <span><em>500</em> &nbsp;points earned for an invitation by</span><span>B***m</span>
          </li>
          <li class="active">
            <span><em>600</em> &nbsp;points earned for an invitation by</span><span>C***m</span>
          </li>
          <li class="active">
            <span><em>700</em> &nbsp;points earned for an invitation by</span><span>D***m</span>
          </li>
          <li class="active">
            <span><em>800</em> &nbsp;points earned for an invitation by</span><span>E***m</span>
          </li>
          <li class="active">
            <span><em>900</em> &nbsp;points earned for an invitation by</span><span>F***m</span>
          </li>
          <li class="active">
            <span><em>550</em> &nbsp;points earned for an invitation by</span><span>G***m</span>
          </li>
          <li class="active">
            <span><em>300</em> &nbsp;points earned for an invitation by</span><span>M***m</span>
          </li>
        </ul>
      </div>
      <div class="card">
        <p class="p_h">Per successful invitation up to</p>
        <div class="star"><strong>300</strong><i></i></div>
        <p class="copied" style="display: none">Invitation code copied</p>
        <p class="copied bring_in" style="display: none">Invitation successful</p>
        <p class="copied ask_to" style="display: none">Invitation failed</p>
        <p class="p_h2">My Invitation Code</p>
        <div class="inviteCode"><span class="yqm">85BZ9</span><i class="copy" onclick="copyInviteCode()"></i></div>
        <div class="btn" onclick="copyInviteCode()">
          <img src="static/images/btn.png" alt="click" />
          <img class="finger" src="static/images/click.png" alt="" />
          <span class="inviteNow">Invite Now</span>
        </div>
        <div class="btn_c"><img id="btnImage" src="static/images/zu3.png" alt="" /><span class="enter_code">Enter Invitation Code</span></div>
        <div class="my_inviter" style="display: none">my inviter：T***m</div>
        <div class="invitationCode" style="display: none">
          <form id="formInvite">
            <p>Please fill in the invitation code</p>
            <input class="from_control" type="text" type="text" autocomplete="off" />
            <div class="from_on"><span class="from_cancel">Cancel</span><span class="from_ok">Ok</span></div>
          </form>
        </div>
        <div class="rewards">
          <p>
            <span class="rewards_s"
              ><i><img src="static/images/zs1.png" alt="" /></i>How to Earn Rewards<i><img src="static/images/zs2.png" alt="" /></i
            ></span>
          </p>
          <div class="tip">
            <span><em>Send an special invite link to a friend.</em></span>
            <span><em>Your friend enters your invitation code.</em></span>
            <span><em>Both of you will receive rewards.</em></span>
          </div>
          <div class="rewardInfo">
            <span><i>6</i><i>Successfully invited</i></span>
            <span><i>68</i><i>Reward points</i></span>
          </div>
          <p class="rewardDetail"><span>Reward details</span><i></i></p>
        </div>
      </div>
    </header>
    <footer>
      <div class="task">
        <p>
          <span class="rewards_s"
            ><i><img src="static/images/zs1.png" alt="" /></i>Tasks for Invitees<i><img src="static/images/zs2.png" alt="" /></i
          ></span>
        </p>
        <ul class="taskList">
          <li>
            <div><img src="static/images/ma.png" alt="" /></div>
            <div class="taskList_i">
              <p>Bind the invitation code within 24H</p>
              <span>For Inviter:30 points</span><span>For Invitee:30 points</span>
            </div>
          </li>
          <li>
            <div><img src="static/images/clock.png" alt="" /></div>
            <div class="taskList_i">
              <p>Read for 15 minutes on Day 2</p>
              <span>For Inviter:30 points</span><span>For Invitee:30 points</span>
            </div>
          </li>
          <li>
            <div><img src="static/images/clock.png" alt="" /></div>
            <div class="taskList_i">
              <p>Read for 10 minutes on Day 3</p>
              <span>For Inviter:30 points</span><span>For Invitee:30 points</span>
            </div>
          </li>
          <li>
            <div><img src="static/images/wallet.png" alt="" /></div>
            <div class="taskList_i">
              <p>Top up within 7 days</p>
              <span>For Inviter:30 points</span><span>For Invitee:30 points</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="rule"><span>View rule details</span></div>
    </footer>
    <div class="overlay" style="display: none"></div>
    <div class="overlay2" style="display: none"></div>
    <div class="popup1" style="display: none">
      <div class="popup_m">
        <h3>Rule details</h3>
        <div>
          <p>1. There are reading rewards every day~!</p>
          <p>2. The reading time is full, and you need to collect it in time, otherwise, please do not have time to read the next day~</p>
          <p>3. The reading time is full, and you need to collect it in time, otherwise, please do not have time to read the next day~</p>
        </div>
      </div>
      <div class="popup_c"><img src="static/images/icon_close.png" alt="" /></div>
    </div>
    <div class="popup2" style="display: none">
      <div class="popup_m2">
        <h3>Reward details</h3>
        <ul>
          <li>
            <div class="reward_L">
              <p>T***m Complete the recharge task</p>
              <p>26.02 15:36</p>
            </div>
            <span>+300points</span>
          </li>
          <li>
            <div class="reward_L">
              <p>T***m Complete reading task</p>
              <p>26.02 15:36</p>
            </div>
            <span>+300points</span>
          </li>
          <li>
            <div class="reward_L">
              <p>T***m Complete the task of binding the invitation code</p>
              <p>26.02 15:36</p>
            </div>
            <span>+300points</span>
          </li>
        </ul>
      </div>
      <div class="popup_c2"><img src="static/images/icon_close.png" alt="" /></div>
    </div>
  </body>
  <script>
    function init() {
      var width = document.documentElement.clientWidth;
      document.documentElement.style.fontSize = width / 7.5 + "px";
    }
    init();
    window.addEventListener("orientationchange", init);
    window.addEventListener("resize", init);

    //弹窗
    const overlay = document.querySelector(".overlay");
    const popup = document.querySelector(".popup1");
    const closeBtn = document.querySelector(".popup_c");

    const popup2 = document.querySelector(".popup2");
    const closeBtn2 = document.querySelector(".popup_c2");

    let scrollYBeforePopup = 0;

    function togglePopup(popupElement) {
      const body = document.body;

      if (popupElement.style.display === "block") {
        body.style.position = "";
        body.style.top = "";
        window.scrollTo(0, scrollYBeforePopup);
      } else {
        scrollYBeforePopup = window.scrollY;
        body.style.position = "fixed";
        body.style.top = `-${scrollYBeforePopup}px`;
      }

      overlay.style.display = popupElement.style.display === "block" ? "none" : "block";
      popupElement.style.display = popupElement.style.display === "block" ? "none" : "block";
    }

    document.querySelectorAll(".rule span").forEach((box) => {
      box.addEventListener("click", () => togglePopup(popup));
    });

    document.querySelectorAll(".rewardDetail span").forEach((box) => {
      box.addEventListener("click", () => togglePopup(popup2));
    });

    closeBtn.addEventListener("click", () => togglePopup(popup));
    closeBtn2.addEventListener("click", () => togglePopup(popup2));

    overlay.addEventListener("click", () => {
      overlay.style.display = "none";
      popup.style.display = "none";
      popup2.style.display = "none";
      document.body.style.position = "";
      document.body.style.top = "";
      window.scrollTo(0, scrollYBeforePopup);
    });

    popup.addEventListener("click", (e) => e.stopPropagation());
    popup2.addEventListener("click", (e) => e.stopPropagation());

    //填写邀请码
    const btnfrom = document.querySelector(".btn_c");
    const btnImage = document.getElementById("btnImage");
    const invitationCode = document.querySelector(".invitationCode");
    const overlay2 = document.querySelector(".overlay2");
    const cancelButton = document.querySelector(".from_cancel");
    const myInviter = document.querySelector(".my_inviter");
    const inputField = document.querySelector(".from_control");
    const okButton = document.querySelector(".from_ok");
    const btnclick = document.querySelector(".btn");
    const btncopy = document.querySelector(".copy");
    var bringInElement = document.querySelector(".bring_in");
    var askToElement = document.querySelector(".ask_to");

    btnImage.addEventListener("click", function () {
      overlay2.style.display = "block";
      invitationCode.style.display = "block";
    });

    // 点击Ok按钮时执行操作
    okButton.addEventListener("click", function () {
      // 获取input的内容
      const inputValue = inputField.value;

      // 判断内容是否为空
      if (inputValue.trim() === "") {
        // 输入为空时显示红色并提示用户输入内容
        inputField.style.border = "1px solid red";
        return; // 停止执行后续操作
      }

      // 邀请人信息
      const inviteName = "mmm";
      // 更新my_inviter内容
      myInviter.textContent = "my inviter: " + inviteName;
      myInviter.style.display = "block";
      btnfrom.style.display = "none";

      // 清空表单内容
      inputField.value = "";

      // 关闭overlay和invitationCode
      overlay2.style.display = "none";
      invitationCode.style.display = "none";

      // 显示邀请成功提示并1秒后隐藏
      bringInElement.style.display = "block";
      setTimeout(function () {
        bringInElement.style.display = "none";
      }, 1000);
    });

    // 点击取消按钮时关闭overlay和invitationCode
    cancelButton.addEventListener("click", function () {
      overlay2.style.display = "none";
      invitationCode.style.display = "none";
      inputField.value = "";
      // 显示邀请失败提示并1秒后隐藏
      askToElement.style.display = "block";
      setTimeout(function () {
        askToElement.style.display = "none";
      }, 1000);
    });
    /* 填写邀请码end */

    //邀请码复制
    function copyInviteCode() {
      var inviteCode = document.querySelector(".yqm");
      var tempInput = document.createElement("input");
      var copied = document.querySelector(".copied");
      tempInput.value = inviteCode.textContent;
      document.body.appendChild(tempInput);
      tempInput.select();
      document.execCommand("copy");
      document.body.removeChild(tempInput);

      copied.style.display = "block";
      setTimeout(function () {
        copied.style.display = "none";
      }, 1000);
    }

    //手指图片
    const img = document.querySelector(".finger");
    let isVisible = true;
    setInterval(() => {
      if (isVisible) {
        img.style.display = "none";
      } else {
        img.style.display = "block";
      }
      isVisible = !isVisible;
    }, 500);

    //顶部信息切换
    var ul = document.querySelector(".list ul");
    var lis = ul.querySelectorAll("li");
    console.log(lis.length);
    var count = lis.length;
    console.log(count);

    function initialize() {
      var ul = document.querySelector(".list ul");
      var lis = ul.querySelectorAll("li");
      // 复制第一个 li 放到最后
      var firstLiClone = lis[0].cloneNode(true);
      ul.appendChild(firstLiClone);

      // 复制最后一个 li 放到最前面
      var lastLiClone = lis[lis.length - 1].cloneNode(true);
      ul.insertBefore(lastLiClone, lis[0]);

      ul.style.position = "absolute";
      ul.style.transform = "translateY(-100%)";
    }
    initialize();

    var ul = document.querySelector(".list ul");
    var lis = ul.querySelectorAll("li");
    var curIndex = 0; //记录第几个信息
    function movTo(index) {
      ul.style.transform = `translateY(-${index}00%)`;
      ul.style.transition = "1s";

      curIndex = index;
    }

    //往上滚动
    let requestId;
    let lastTime = 0;
    const interval = 1500;

    function topNext(timestamp) {
      if (!lastTime) {
        lastTime = timestamp;
      }

      const deltaTime = timestamp - lastTime;

      if (deltaTime >= interval) {
        if (curIndex === count - 1) {
          ul.style.transition = "none";
          ul.style.transform = `translateY(100%)`;
          ul.clientHeight;
          movTo(0);
        } else {
          movTo(curIndex + 1);
        }

        lastTime = timestamp;
      }

      requestId = requestAnimationFrame(topNext);
    }

    requestId = requestAnimationFrame(topNext);

    // 当页面不可见时取消动画
    document.addEventListener("visibilitychange", function () {
      if (document.hidden) {
        cancelAnimationFrame(requestId);
      } else {
        requestId = requestAnimationFrame(topNext);
      }
    });
  </script>
</html>
